<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入主播姓名搜索"
            v-model="alone.searchForm.data.realName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入主播昵称搜索"
            v-model="alone.searchForm.data.nickName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入身份证号码搜索"
            v-model="alone.searchForm.data.idCard"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.remainder"
            placeholder="请选择剩余到期时间搜索"
          >
            <el-option
              v-for="item in alone.warningTime"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.validStatus"
            placeholder="请选择异常类型"
          >
            <el-option
              v-for="item in alone.exception"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="alone.searchForm.data.platform"
            placeholder="请选择平台搜索"
          >
            <el-option
              v-for="item in $store.state.platformList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-cascader
            v-model="alone.searchForm.data.platform"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
            placeholder="请选择意向平台搜索"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <p>{{ scope.row.realName || "---" }}</p>
              </template>
            </el-table-column>
            <el-table-column label="昵称">
              <template slot-scope="scope">
                <p>{{ scope.row.nickName || "---" }}</p>
              </template>
            </el-table-column>
            <el-table-column label="直播平台">
              <template slot-scope="scope">
                <p>{{ scope.row.liveBroadcastPlatform || "---" }}</p>
              </template>
            </el-table-column>
            <el-table-column label="直播id">
              <template slot-scope="scope">
                <p>{{ scope.row.liveBroadcastId || "---" }}</p>
              </template>
            </el-table-column>
            <el-table-column label="合同编号">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractNo)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="合同名称">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractName)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="签约日期">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.signDate)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <!-- <el-table-column label="期限">
              <template slot-scope="scope">
                <p v-for="(item, index) in split(scope.row.signDate)" :key="index">{{item || '---'}}</p>
              </template>
            </el-table-column> -->
            <el-table-column label="开始日期">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractStartDate)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="终止日期">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractEndDate)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="合同位置">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractPos)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="pdf合同">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.contractLinks)"
                  :key="index"
                >
                  <a v-if="item" :href="item" target="_blank">{{
                    getSplitName(item)
                  }}</a>
                  <span v-else>---</span>
                </p>
              </template>
            </el-table-column>
            <el-table-column label="金额">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.amount)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="异常原因">
              <template slot-scope="scope">
                <p
                  v-for="(item, index) in split(scope.row.validMsg)"
                  :key="index"
                >
                  {{ item || "---" }}
                </p>
              </template>
            </el-table-column>
            <el-table-column
              prop="contractStatus"
              label="主播状态"
            ></el-table-column>
            <!-- <el-table-column label="操作">
              <el-button type="text" size="small">详情</el-button>
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">修改状态</el-button>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAgreementActorList } from "@/api/actor.js";
import _ from "lodash";

export default {
  name: "lawyer_warningList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    alone: {
      exception: [
        {
          id: 0,
          name: "成功"
        },
        {
          id: 1,
          name: "警告"
        }
      ],
      warningTime: [
        {
          name: "小于等于1个月",
          value: 1 * 30
        },
        {
          name: "小于等于3个月",
          value: 3 * 30
        }
      ],
      searchForm: {
        loading: false,
        data: {
          realName: "",
          nickName: "",
          idCard: "",
          remainder: "",
          platform: ""
        }
      }
    },

    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
    _that.getOrgData();
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      let searchForm = _that.alone.searchForm;
      if (searchForm.loading) {
        return;
      }
      _that.alone.searchForm.loading = true;
      // if (!searchForm.data.realName && !searchForm.data.nickName && !searchForm.data.idCard && !searchForm.data.remainder && !searchForm.data.platform) {
      //   _that.$message.error({message: "搜索条件不能都为空", onClose: () => {
      //     _that.alone.searchForm.loading = false;
      //
      //   }});
      //   return;
      // }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      searchForm.data.remainder = searchForm.data.remainder || 6 * 30;
      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getAgreementActorList({ params: data })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            let respDataReal = respData.data || {};
            if (!respData.data) {
              return;
            }
            _that.pageAjax.data = respDataReal.list || [];
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
          _that.alone.searchForm.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr =
          _.cloneDeep(
            _that.$store.getters.allPlatformListOffspringnTreeData(2)
          ) || [];

        _that.orgSupAjax.data = arr;
      });
    },
    split(str) {
      if (!str) {
        return [""];
      }
      let arr = str.split("|");
      // let arr = str.split('|').filter((item) => {
      //   return !!item;
      // })
      return arr;
    },
    getSplitName(str) {
      if (!str) {
        return "";
      }
      let arr = str.split("/");
      if (!arr.length) {
        return str;
      }
      return arr[arr.length - 1];
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
}
</style>
